<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #ff416c">
        <h2 style="text-align:center;line-height:60px">用户中心</h2>
      </el-header>
      <el-container>
        <el-aside width="30%" height="100%">
          <div>
            <el-row class="tac">
              <el-col :span="12">
                <el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select ="selectIndex">
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon>
                        <VideoCameraFilled />
                      </el-icon>
                      <span>我的视频</span>
                    </template>
                    <el-menu-item-group title="我的视频">
                      <el-menu-item index="1-1">发布视频</el-menu-item>
                      <el-menu-item index="1-2">查看视频</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>

                  <el-sub-menu index="2">
                    <template #title>
                      <el-icon>
                        <VideoCameraFilled />
                      </el-icon>
                      <span>个人信息</span>
                    </template>
                    <el-menu-item-group title="个人信息">
                      <el-menu-item index="2-1">查看信息</el-menu-item>
                      <el-menu-item index="2-2">更新信息</el-menu-item>
                      <el-menu-item index="2-3">查看图片</el-menu-item>
                    </el-menu-item-group>
                  </el-sub-menu>

                  <el-sub-menu index="3">
                    <template #title>
                      <el-icon>
                        <VideoCameraFilled />
                      </el-icon>
                      <span>操作</span>
                    </template>
                    <el-menu-item-group title="跳转">
                      <el-menu-item index="3-1">返回主页</el-menu-item>
<!--                      <el-menu-item index="3-2">更新信息</el-menu-item>-->
                    </el-menu-item-group>
                  </el-sub-menu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-aside>
        <el-main class="el-box-shadow-dark">
          <template v-if="showList.upVideo">
            <div style="border-radius: 4px;width: 800px">
              <el-form :model="videoInfo" label-width="120px">
                <el-form-item label="视 频 名 称">
                  <el-input v-model="videoInfo.video_name" />
                </el-form-item>
                <el-form-item label="视 频 类 型">
                  <el-select v-model="videoInfo.video_type_id" placeholder="选择类型">
                    <div v-for="(item) in typeInfo">
                      <el-option :label="item.name" :value="item.ID" />
                    </div>
                  </el-select>
                </el-form-item>
                <el-form-item label="视 频 简 介">
                  <el-input v-model="videoInfo.video_simple_info" type="textarea" show-word-limit maxlength="15" />
                </el-form-item>
                <el-form-item label="地 址">
                  <el-upload class="upload-demo" name="video" multiple :limit="1" :http-request="changeFile">
                    <el-button type="primary">选择视频</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        视频文件不要小于500kb.
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="upVideo">提交</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
          <!-- 查看视频 -->
          <template v-if="showList.queryVideo">
            <div  v-if="videoData.length>0">
              <el-table :data="videoData" height="600px" style="width: 100%">
                <el-table-column prop="video_id" label="视频ID" width="1" v-if="false"/>
                <el-table-column prop="name" label="视频名称" width="100" />
                <el-table-column prop="type_ids" label="分类" width="100" />
                <el-table-column prop="simple_context" label="视频简介" width="100" />
                <el-table-column prop="video_http" label="地址" width="250" />
                <el-table-column  width="200">
                  <template #default = "data">
                     <el-button link type="primary" size="small" @click="updateVideoInfo(data.row)">更 新</el-button>
                    <el-button link type="primary" size="small"  @click="deleteVideo(data.row)">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
          <template v-if="updateList.upVideo">
            <el-form :model="updateVideoReq" label-width="120px">
              <el-form-item label="视 频 名 称">
                <el-input v-model="updateVideoReq.name" />
              </el-form-item>
              <el-form-item label="视 频 类 型">
                <el-select v-model="updateVideoReq.type_ids" placeholder="选择类型">
                  <div v-for="(item) in typeInfo">
                    <el-option :label="item.name" :value="item.ID" />
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item label="视 频 简 介">
                <el-input v-model="updateVideoReq.simple_context" type="textarea" show-word-limit maxlength="15" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateAxios">更 新 信 息</el-button>
                <el-button @click="cancelUpdateVideo">取 消</el-button>
              </el-form-item>
            </el-form>
          </template>
          <template v-if="showList.queryUserInfo">
            <div>
              主页展示个人信息<br>
              <br>用户昵称：
              {{userInfo.nick_name}}
              <br> 用户id:
              {{userInfo.user_id}}
              <br> 用户性别:
              {{getSex(userInfo.sex)}}
              <br> 头像
              <el-image style="width: 100px; height: 100px" :src="userInfo.image_src" fit="fill" />
              <br>
                  电话
              {{userInfo.phone}}
            </div>
          </template>
          <template v-if="showList.updateUserInfo">
            <div style="border-radius: 4px;width: 800px">
              <el-form :model="userInfo" label-width="120px">
                <el-form-item label="昵 称">
                  <el-input v-model="userInfo.nick_name" />
                </el-form-item>
                <el-form-item label="电 话">
                  <el-input v-model="userInfo.phone" />
                </el-form-item>
                <el-form-item label="性 别">
                  <el-select v-model="userInfo.sex" placeholder="选择类型">
                    <el-option label="未选择" value="0" />
                    <el-option label="男" value="1" />
                    <el-option label="女" value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateUserInfo">提交</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
          <template v-if="showList.queryImageInfo">
            <div>
              <el-table :data="imgInfo" height="250" style="width: 100%">
                <el-table-column prop="image_id" label="图片ID" width="1" v-if="false"/>
                <el-table-column width="300">
                   <template #default = "ref">
                     <el-image style="width: 100px; height: 100px" :src="ref.row.image_http" fit="fill" />
                   </template>
                </el-table-column>
                <el-table-column prop="image_http" label="图片链接" width="300" />
                <el-table-column  width="200" >
                  <template #default = "data">
                    <el-button link type="primary" size="small" @click="upImgToUserInfo(data.row)">设 为 头 像</el-button>
                    <el-button link type="primary" size="small"  @click="deleteImg(data.row)">删 除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="border-radius: 4px;width: 800px">
              <el-form  label-width="120px">
                <el-form-item label="选 择 图 片">
                  <el-upload class="upload-demo" name="img" multiple :limit="1" :http-request="changImgFile">
                    <el-button type="primary">图片</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        视频文件不要小于500kb.
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="upImg">提交</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import {reactive, ref, inject, watch, onMounted} from 'vue'
import { useStore } from 'vuex'
import {
  Document,
  Menu as IconMenu,
  VideoCameraFilled,
  Setting,
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
const $axios = inject('$axios')
const router = useRouter()
const showList =reactive({
  upVideo:false,
  queryVideo:false,
  updateUserInfo:false,
  queryUserInfo:true,
  queryImageInfo:false,
})
const updateList = reactive({
  upVideo:false,
})
const videoInfo = reactive({
  video_name: "",
  video_simple_info: "",
  video_type_id: "",
})
const formData = new FormData()
const upImgFormData = new FormData()
const $store = useStore();
//搜索视频
const searchVideoReq=reactive({
  page:1,
  size:10,
})
//搜索图片
let searchImgReq =reactive ({
  page:1,
  size:5,
})
const videoData =reactive([{
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  author_id:"",
  author_nick_name:"",
  collection_people:"",
  comment_ids:"",
  dis_like_people:"",
  format:"",
  image_id:"",
  image_src:"",
  img_http:"",
  like_people:"",
  name:"",
  simple_context:"",
  size:"",
  src:"",
  type_ids:"",
  user_status_collect:"",
  user_status_dis_like:"",
  user_status_like:"",
  video_http:"",
  video_id:"",
}])
const userInfo  = ref({
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  collection_videos:"",
  dis_like_videos:"",
  image_id:"",
  image_src:"",
  like_videos:"",
  nick_name:"",
  phone:"",
  role_id:"",
  sex:"",
  user_id:"",
  user_name:"",
})
const typeInfo = reactive([{
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  name:"",
  operator_id:"",
  operator_name:"",
}])
const imgInfo  = ref([{
  Info:{
    CreatedAt:"",
    DeletedAt:"",
    ID:"",
    UpdateAt:"",
    author_id:"",
    format:"",
    image_id:"",
    name:"",
    size:"",
    src:"",
  },
  image_http:"",
}])
const changeIndex = ref(2)
const updateVideoReq =ref({
  CreatedAt:"",
  DeletedAt:"",
  ID:"",
  UpdateAt:"",
  author_id:"",
  author_nick_name:"",
  collection_people:"",
  comment_ids:"",
  dis_like_people:"",
  format:"",
  image_id:"",
  image_src:"",
  img_http:"",
  like_people:"",
  name:"",
  simple_context:"",
  size:"",
  src:"",
  type_ids:"",
  user_status_collect:"",
  user_status_dis_like:"",
  user_status_like:"",
  video_http:"",
  video_id:"",
})
//菜单
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
//上传视频
function upVideo() {
  formData.append('video_name', videoInfo.video_name)
  formData.append('video_simple_info', videoInfo.video_simple_info)
  formData.append('video_type_id', videoInfo.video_type_id)
  //判断数据是否为空
  $axios({
    headers: {
      'Content-Type': 'multipart/form-data',
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: '/video/up',
    data: formData
  }).then((res) => {
    //判断结果
    if (res.data.code === 1000) {
      ElMessage({
        message: '上传成功',
        type: 'success',
      })
      //将formData 为空
      formData.delete('video_name')
      formData.delete('video_simple_info')
      formData.delete('video_type_id')
      formData.delete('video')
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      })
    }
  })
}
const changeFile = (e) => {
  formData.append('video', e.file)
}
const changImgFile = (e)=>{
  upImgFormData.append('img',e.file)
}
//查看视频
const searchVideoByUser=()=>{
  let url = "/video/search/author?page="+searchVideoReq.page+"&size="+searchVideoReq.size
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'get',
    url: url,
  }).then((res)=>{
    if (res.data.data&&res.data.data.length!=0){
      res.data.data.forEach((e,i)=>{
        videoData[i] = e
      })
    }
  })
}
//更新视频
const  updateVideoInfo =(e)=>{
  updateVideoReq.value=e
  updateList.upVideo = true
  showList.queryVideo =false
}
const updateAxios=()=>{
  ElMessage({
    message: "更新成功",
    type: "success",
  });
}
const cancelUpdateVideo =()=>{
  updateList.upVideo = false
  showList.queryVideo =true
}
//删除视频
const  deleteVideo =(e)=>{
  let deleteVideoReq = {video_id:""}
  deleteVideoReq.video_id = e.video_id
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: "/video/delete ",
    data:deleteVideoReq
  }).then((resp)=>{
    if (resp.data.code === 1000) {
      //浏览器弹出消息
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    } else {
      ElMessage.error(resp.data.msg);
    }
  })
}
//查找个人信息
const queryUserInfo =()=>{
  let url = "/user/userInfo"
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: url,
  }).then((res)=>{
    if (res.data.data){
      userInfo.value = res.data.data
      //将头像保存到vuex
      $store.state.img_url =userInfo.value.image_src
    }
  })
}
//处理性别
const  getSex =(index)=>{
  switch (index){
    case 0:
      return"未选择";
    case 1:
      return "男";
    case 2:
      return "女";
  }
}
//更新个人信息
const updateUserInfo =()=>{
  userInfo.value.sex +=""
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: "/user/update/base",
    data: userInfo.value
  }).then((resp)=>{
    if (resp.data.code === 1000) {
      //浏览器弹出消息
      ElMessage({
        message: "更新成功",
        type: "success",
      });
    } else {
      ElMessage.error(resp.data.msg);
    }
      })
}
//获得视频分类
const getAllType= ()=>{
  let getAllTypeReq = {
    page:1,
    size:50,
  }
  $axios.post("/common/video/type/all",getAllTypeReq)
      .then((res)=>{
        if (res.data.data&&res.data.data.length!=0){
           res.data.data.forEach((e,i)=>{
             typeInfo[i] = e
           })
        }
      })
}
//上传图片
const upImg =()=>{
  $axios({
    headers: {
      'Content-Type': 'multipart/form-data',
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: '/img/up',
    data: upImgFormData
  }).then((resp) => {
    if (resp.data.code === 1000) {
      //浏览器弹出消息
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      //删除键
      upImgFormData.delete('img')
    } else {
      ElMessage.error(resp.data.msg);
    }
  })
}
//查看图片
const searchAllImg=()=>{
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: "/img/search ",
    data: searchImgReq
  }).then((res)=>{
   if (res.data&&res.data.data.length!=0){
     imgInfo.value = res.data.data
   }
  })
}
//设置为头像
const upImgToUserInfo =(e)=>{
  let upImgToUserInfoReq = {img_id:"",id:"",img_url:""}
  upImgToUserInfoReq.img_id = e.Info.image_id
  upImgToUserInfoReq.id= e.Info.ID+""
  upImgToUserInfoReq.img_url = e.image_http
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: "/user/update/img",
    data: upImgToUserInfoReq
  }).then((resp)=>{
    if (resp.data.code === 1000) {
      //浏览器弹出消息
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      //重新获得用户信息
      queryUserInfo()
    } else {
      ElMessage.error(resp.data.msg);
    }
  })
}
//删除图片
const deleteImg=(e)=>{
  let deleteImgReq = {img_id:""}
  deleteImgReq.img_id = e.Info.image_id
  $axios({
    headers: {
      "Authorization": "Bearer " + $store.state.Token
    },
    method: 'post',
    url: "/img/delete ",
    data: deleteImgReq
  }).then((resp)=>{
    if (resp.data.code === 1000) {
      //浏览器弹出消息
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    } else {
      ElMessage.error(resp.data.msg);
    }
  })
}
const selectIndex =(e)=>{
  //将更新都为false
  updateList.upVideo = false

  if( e =="1-1"){
    //发布视频
    showList.upVideo = true
    changeIndex.value = 0
  }else if(e =="1-2"){
    //查看视频
    showList.queryVideo = true
    changeIndex.value = 1
    //请求
    if (videoData.length>1){
      return
    }
    searchVideoByUser()
  }else if (e =="2-1"){
    //查看基础信息
    showList.queryUserInfo = true
    changeIndex.value = 2
  }else if(e =="2-2"){
    //更新信息
    showList.updateUserInfo =true
    changeIndex.value = 3
  }else if(e =="2-3"){
    //查看图片
    showList.queryImageInfo =true
    changeIndex.value = 4
    //请求
    if (videoData.length>1){
      return
    }
    searchAllImg()
  } else if (e =="3-1"){
    router.push({
      name:"videoBox"
    })
  }
}
watch(changeIndex,(newValue,oldValue)=>{
  switch (oldValue){
    case 0:
      return showList.upVideo = false
    case 1:
      return showList.queryVideo = false
    case 2:
      return showList.queryUserInfo = false
    case 3:
      return showList.updateUserInfo = false
    case 4:
      return showList.queryImageInfo = false
  }
})
onMounted(()=>{
  //得到用户信息
  queryUserInfo()
  //得到分类信息
  getAllType()
  //
})
</script>

<style scoped>
.common-layout{
  height: 100vh;
  padding: 0;
  margin: 0;
}
::v-deep(.upload-demo) {
  margin: 10px;
}
::v-deep(.el-menu-item.is-active) {
  color: red;
}

::-webkit-scrollbar {
  display: none;
}
/*查看视频*/
</style>